<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="./css/margin.css" />
</head>

<body>

    <h1>CSS 外边距</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_margin.asp">CSS 外边距</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_margin_collapsing.asp">CSS 外边距合并</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。</p>
    <p>设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。</p>


    <h2>可能取值</h2>
    <ul>
        <li><strong>auto</strong> 浏览器计算外边距。</li>
        <li><strong>length</strong> 规定以具体单位计的外边距值，比如像素等。默认值是 0px。</li>
        <li><strong>%</strong> 规定基于父元素的宽度的百分比的外边距。</li>
        <li><strong>inherit</strong> 规定应该从父元素继承外边距。</li>
    </ul>


    <h2>单边内边距属性</h2>

    <ul>
        <li><strong>margin-bottom</strong> 设置元素的下外边距。</li>
        <li><strong>margin-left</strong> 设置元素的左外边距。</li>
        <li><strong>margin-right</strong> 设置元素的右外边距。</li>
        <li><strong>margin-top</strong> 设置元素的上外边距。</li>
    </ul>


    <h2 id="margin_collapsing">CSS 外边距合并</h2>
    <p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。</p>
    <p>合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</p>


    <h3>示例一</h3>

    <div id="d1">
    </div>

    <div id="d2">
    </div>


    <pre>
&lt;div id=&quot;d1&quot;&gt;
&lt;/div&gt;

&lt;div id=&quot;d2&quot;&gt;
&lt;/div&gt;

// 其中d1的下边距为20px，d2的上边距为10px，但经过合并后，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。
#d1 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: red;
}

#d2 {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    background-color: blue;
}
    </pre>


    <h3>示例二</h3>


    <div id="outer">
        <div id="inner">
        </div>
    </div>


    <pre>
&lt;div id=&quot;outer&quot;&gt;
    &lt;div id=&quot;inner&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

// 其中outer的上边距为20px，inner的上边距为10px，但经过合并后，两个 div的上外边距进行了叠加
#outer {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 20px;
}

#inner {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin-top: 10px;
}     
    </pre>
</body>

</html>